<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/i/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>BearAll</title>
  <meta name="description" content="A blog for the Geek and Athlete in all of us, blogs and info and Tech and Fitness and all other geek things"></meta>
  <meta name="keywords" content="Technology, Fitness, Programming, Blogging, Health, Life"></meta>


  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
  <link rel="apple-touch-icon" sizes="57x57" href="img/pngs/apple-touch-icon-57x57.png"/>
  <link rel="apple-touch-icon" sizes="72x72" href="img/pngs/apple-touch-icon-72x72.png"/>
  <link rel="apple-touch-icon" sizes="114x114" href="img/pngs/apple-touch-icon-114x114.png"/>

    <!--Link Style Sheets-->
  <link media="all" rel="stylesheet" type="text/css" href="style.css" />

    <!-- Special Fonts for the Site-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,greek-ext' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script> 
        //Suppose to help with IE9 and lower
    document.createElement('header'); 
    document.createElement('nav'); 
    document.createElement('article'); 
    document.createElement('footer'); 

    //Following fucntion will be used to change the navigation from inline words to a navigon
    $(function() 
    {
	    var pull 		= $('#pull');
		    menu 		= $('nav ul');
		    menuHeight	= menu.height();

	    $(pull).on('click', function(e) 
        {
		    e.preventDefault();
		    menu.slideToggle();
	    });

	    $(window).resize(function()
        {
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) 
            {
        	    menu.removeAttr('style');
            }
        });
    });

    </script>

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except this Modernizr build.
       Modernizr enables HTML5 elements & feature detects for optimal performance.
       Create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body class="bg-main">

   
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
 <header id="page_header">
 <hgroup class="screen-reader-text">
	<h1>OpenSource</h1>
    <h2>Online Magazine</h2>

    Using Open Source for work and play
    </hgroup>
     
</header>

      <nav class="clearfix">
		<ul class="clearfix">
			<li><a href="#">Home</a></li>
			<li><a href="#">How-to</a></li>
			<li><a href="#">Icons</a></li>
			<li><a href="#">Design</a></li>
			<li><a href="#">Web 2.0</a></li>
			<li><a href="#">Tools</a></li>	
		</ul>
		<a href="#" id="pull">Menu</a>
	</nav>

    <div id="container2" class="bdr bdr-top"><!--inner -->

      <div class="content  seven-eighths">
       <h2 class="thisMonth embossed" style="color:#000;">Latest:</h2>
          </hr>

          <div role ="main">
    
              <article class="post">
                <h2 class=""><a href="#">Really Long Article Title Name The More Text The Better Cause You Never Know</a></h2>
                <p class="entry-meta">by Author Name for <a href="#">Column Type</a></p>

                  <div class="entry-content"><!--//post-->
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p>  

                        
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p> 


                        </div><!--//.entry-content-->

                        <p class="left"><a class="more" href="#">Read more &raquo;</a></p>
                        <p class="right"><a class="comments" href="#">150 comments</a> </p>
                        <div class="push"></div>

               </article>



              <article class="post right half">
                  <hr>
                        <h2 class=""><a href="#">Really Long Article Title Name The More Text The Better Cause You Never Know</a></h2>
                        <p class="entry-meta">by Author Name for <a href="#">Column Type</a></p>

                        <div class="entry-content"><!--//post-->
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p>  


                        </div><!--//.entry-content-->
                        <p class="left"><a class="more" href="#">Read more &raquo;</a></p>
                        <p class="right"><a class="comments" href="#">850 comments</a> </p>
                        <div class="push"></div>
               </article>

                <article class="post left half">
                    <hr>
                        <h2 class=""><a href="#">Really Long Article Title Name The More Text The Better Cause You Never Know</a></h2>
                        <p class="entry-meta">by Author Name for <a href="#">Column Type</a></p>

                        <div class="entry-content"><!--//post-->
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p>  

                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p> 


                        </div><!--//.entry-content-->
                        <p class="left"><a class="more" href="#">Read more &raquo;</a></p>
                        <p class="right"><a class="comments" href="#">850 comments</a> </p>
                        <div class="push"></div>
                </article>

                    <br><br>
              
              <div class="push"></div>
                <article class="post">
                    <hr>
                <h2 class=""><a href="#">Really Long Article Title Name The More Text The Better Cause You Never Know</a></h2>
                <p class="entry-meta">by Author Name for <a href="#">Column Type</a></p>

                  <div class="entry-content"><!--//post-->
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p>  

                        
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p> 


                        </div><!--//.entry-content-->

                        <p class="left"><a class="more" href="#">Read more &raquo;</a></p>
                        <p class="right"><a class="comments" href="#">150 comments</a> </p>
                        <div class="push"></div>

                 </article>



              <article class="post right half">
                  <hr>
                        <h2 class=""><a href="#">Really Long Article Title Name The More Text The Better Cause You Never Know</a></h2>
                        <p class="entry-meta">by Author Name for <a href="#">Column Type</a></p>

                        <div class="entry-content"><!--//post-->
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p>  


                        </div><!--//.entry-content-->
                        <p class="left"><a class="more" href="#">Read more &raquo;</a></p>
                        <p class="right"><a class="comments" href="#">850 comments</a> </p>
                        <div class="push"></div>
               </article>

                <article class="post left half">
                    <hr>
                        <h2 class=""><a href="#">Really Long Article Title Name The More Text The Better Cause You Never Know</a></h2>
                        <p class="entry-meta">by Author Name for <a href="#">Column Type</a></p>

                        <div class="entry-content"><!--//post-->
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p>  

                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante.</p> 


                        </div><!--//.entry-content-->
                        <p class="left"><a class="more" href="#">Read more &raquo;</a></p>
                        <p class="right"><a class="comments" href="#">850 comments</a> </p>
                        <div class="push"></div>
                </article>

          </div><!--main role -->

          <!-- #left sidebar -->
       <aside class="sidebar right third">                     
                    <div class="">	
                    <h2 class="features embossed">Features:</h2>
                    <ul class="tocNav">
                    <li><a href="#">Article Name 01 Lorem ipsum dolor sit amet consectetuer adipiscing elit</a></li>
                    <li><a href="#">Article Name 02 Lorem ipsum dolor sit amet</a></li>
                    <li><a href="#">Article Name 03 Lorem ipsum</a></li>
                    </ul>
                    </div>
       </aside>

          <aside class="sidebar1 right third">
                <div class="">
                    <h2 class="columns embossed">Columns:</h2>
                    <ul class="tocNav">
                    <li><a href="#">Name of Category 01 Lorem ipsum (#)</a></li>
                    <li><a href="#">Name of Category 02 Lorem (#)</a></li>
                    <li><a href="#">Name of Category 03 Lorem ipsum dolor (#)</a></li>
                    </ul>
                  </div>
            </aside> 

             <aside class="sidebar2 right third">
                    <div class="">
                    <h2 class="pastIssues embossed">Past Issues:</h2>
                    <ul class="tocNav">
                    <li><a href="#">Archive Link year/month 01</a></li>
                    <li><a href="#">Archive Link year/month 02</a></li>
                    <li><a href="#">Archive Link year/month 03</a></li>
                    </ul>
                    </div>
                 </aside>
                    


                <div class="push"></div>
             
     </div><!-- inner-->

    </div><!--con2-->


    </div>

  <div id="across">
     <footer>
         <h2 class="screen-reader-text">Footer Information:</h2>
         <aside class="general left two-thirds">

        <h2>Socialize</h2>
        <ul class="grid4up">
            <li><a href="#" class="soc facebook">facebook</a></li>
            <li><a href="#" class="soc twitter">twitter</a></li>
            <li><a href="#" class="soc rss">rss</a></li>
            <li><a href="#" class="soc google">gmail</a></li>
        </ul>

        <div class="push"></div>
        <h2>About us</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

          </aside>

         <aside class="navigate right third">
                <h2>Navigate</h2>
                <ul>
                    <li><a href="#" target="" title="">title to link01</a> </li>
                    <li><a href="#" target="" title="">another link02</a></li>
                    <li><a href="#" target="" title="">a different title: link03</a></li>
                    <li><a href="#" target="" title="">yet another link04</a></li>
                </ul>
          </aside>

                <div class="push"></div>
    </footer>
      
    </div> <!-- Across -->



    <div id="copyright">
    <p>Copyright &copy;&nbsp;"ENTER YEAR"&nbsp</p>
    </div>


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

  <!-- scripts concatenated and minified via build script -->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!-- end scripts -->

  <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
       mathiasbynens.be/notes/async-analytics-snippet -->
  <script>
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>
</body>
</html>